<template>
	<view class="container">
		<!-- loading 状态 -->
		<view v-if="loading" class="loading-container">
			<image src="../../static/loading.gif" class="loading-icon"></image>
			<text class="loading-text">加载中...</text>
		</view>

		<view v-else-if="loaded" v-for="(item,index) in items" :key="item.id" class="product-item-container">
			<image :src="item.imageUrl" @error="item.imageUrl = default_path" class="product-item-image"></image>
			<view class="product-item-info-container">
				<text class="product-item-name"> {{ item.name}} </text>
				<text class="product-item-price"> {{item.price}}元 </text>
				<button size="mini" @click="onProductItemClicked(index)">购买</button>
			</view>
		</view>

		<view v-else class="error-container">
			<image src="/static/error3.png" mode="aspectFit" class="error-icon">
			</image>
			<text class="error-text">加载商品列表失败</text>
			<button class="error-button" @click="fetchProductList()">重试</button>
		</view>
	</view>
</template>

<script>
	import Product from '../../models/product.js';
	import constant from '../../models/constant.js';
	let tag = "product-list";
	const base_url = ""
	export default {
		onLoad() {
			this.fetchProductList()
		},

		data() {
			return {
				login: true,
				loading: true, // 初始设为加载中状态
				loaded: false, // 初始设为未加载完成
				default_path: "/static/error1.png",
				baseUrl: "https://vending.neumooc.com/prod-api/",
				items: []
				// items : [
				// 	{
				// 		id : 1,
				// 		name : "可乐",
				// 		price : 3,
				// 		imageUrl : "/static/可乐.png"
				// 	},
				// 	{
				// 		id : 2,
				// 		name : "牛奶",
				// 		price : 5,
				// 		imageUrl : "/static/牛奶.png"
				// 	},
				// 	{
				// 		id : 3,
				// 		name : "雪碧",
				// 		price : 5,
				// 		imageUrl : "https://pic.rmb.bdstatic.com/bjh/events/4531b384e18630fb4a7615d974a7a6e62814.jpeg"

				// 	}
				// ]

			}
		},
		methods: {
			onProductItemClicked(index) {
				this.$log.info(tag, `onProductItemClicked ${index}`);
				// 如果已登录，跳转“购买商品页”
				if (this.login) {
					this.$log.info(tag, "onProductItemClicked navigate to purchase")
					let productJsonString = JSON.stringify(this.items[index])
					uni.navigateTo({
						url: `/pages/purchase/purchase?product=${encodeURIComponent(productJsonString)}`
					})
				} else { //如果未登录，跳转“登录页”
					this.$log.info(tag, "onProductItemClicked navigate to login")
					uni.navigateTo({
						url: '/pages/login/login'
					})
				}
			},

			parseProduct(jsonData) {
				let productList = [];
				jsonData.data.forEach((category) => {
					console.info(category.categoryName);
					category.productList.forEach((product) => {
						// console.info(product.name,product.price)
					});
				})
				return productList;
			},

			fetchProductList() {
				this.loading = true;
				this.loaded = false;
				this.$log.info(tag, "fetchProductList");

				uni.request({
					url: `${constant.BASE_URL}/api/machine/products`,
					method: 'GET',
					data: {
						machineNo: constant.MACHINE_NO,
					},
					header: {
						'content-type': 'application/json'
					},
					success: (res) => {
						if (res.data.code == 200) {
							this.$log.info(tag, "获取商品列表成功", res.data);
							this.loading = false;
							this.loaded = true;
							// 使用parseProductList解析数据并生成Product实例
							// this.items = res.data.data[0].productList;
							this.items = this.parseProductList(res.data);
						} else {
							this.$log.error(tag, "获取商品列表失败");
							this.loading = false;
							this.loaded = false;
						}
					},
					fail: (error) => {
						this.$log.error(tag, "获取商品列表失败", error);
						this.loading = false;
						this.loaded = false;
					}
				});
			},

			parseProductList(jsonObject) {
				let productList = [];
				jsonObject.data.forEach((category) => {
					this.$log.info(tag, category.categoryName);
					category.productList.forEach((product) => {
						let p = new Product(
							product.id,
							product.name,
							product.price,
							`${constant.BASE_URL}${product.cover}`,
							product.stock
						);
						productList.push(p);
						this.$log.info(p.imageUrl);
					});
				})
				return productList;
			}
		}
	}
</script>

<style>
	.container {
		display: flex;
		flex-direction: column;
	}

	.product-item-container {
		display: flex;
		flex-direction: row;
		margin-bottom: 30rpx;
	}

	.product-item-info-container {
		display: flex;
		flex-direction: column;
		margin-left: 20rpx;
	}

	.product-item-name {
		font-size: 38rpx;
		font-weight: bold;
	}

	.product-item-stock {
		font-size: 30rpx;
		color: grey;
	}

	.product-item-price {
		font-size: 38rpx;
		font-weight: bold;
		color: coral
	}

	.product-item-image {
		width: 200rpx;
		height: 200rpx;
	}

	.product-item-hover-effect {
		opacity: 0.5;
	}

	.loading-container {
		height: 100vh;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.loading-text {
		font-size: 40rpx;
		color: grey;
	}

	.loading-icon {
		width: 80px;
		height: 80px;
	}

	.error-container {
		height: 100vh;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.error-icon {
		width: 80px;
		height: 80px;
	}

	.error-text {
		color: grey;
		font-size: 30rpx;
		margin-top: 5px;
	}

	.retry-button {
		font-size: 35rpx;
		margin-top: 15px;
		color: steelblue;
	}

	.order-list-container {
		position: fixed;
		bottom: 50px;
		right: 20px;
		width: 40px;
		height: 40px;
		background-color: #08f;
		border-radius: 50%;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.order-list-container-hover {
		opacity: 0.5;
	}

	.order-list-icon-text {
		color: white;
		font-size: 70rpx;
		font-weight: bold;
		padding-bottom: 2px;
	}
</style>